<template>
  <h2>watch监听</h2>
  <div id="box">count: {{ count }} - <button @click="count++">btn</button></div>
  <div>num: {{ num }}</div>
  <div>obj: {{ obj }} - <button @click="change">change obj</button></div>
</template>

<script>
// watch方法用于数据监听
import { watch, ref, watchEffect } from "vue";

export default {
  setup() {
    const count = ref(3);
    const obj = ref({ a: 3, b: 4 });
    const num = ref(3);

    const change = () => {
      obj.value.c = 5;
    };

    // 至少要有两个参数
    // 第一个是要监听的数据，第二个是数据改变以后的回调函数,回调函数又可以有两个参数val,oldval
    // 允许接受第三个参数，描述对象
    // watch(
    //   count,
    //   (val, oldVal) => {
    //     console.log(
    //       "count改变了",
    //       val,
    //       oldVal,
    //       document.querySelector("#box").innerHTML
    //     );
    //   },
    //   {
    //     deep: true,
    //     immediate: true,
    //     flush: "post",
    //   }
    // );

    // watch(
    //   count,
    //   () => {
    //     setTimeout(() => {
    //       num.value = count.value + 1;
    //     }, 500);
    //   },
    //   { immediate: true }
    // );

    // watchEffect一开始就会做一次
    // 会自己去判断要对什么内容进行监听,可以做到同时对多个数据的监听
    watchEffect(() => {
      let a = count.value + 1;
      setTimeout(() => {
        num.value = a;
      }, 500);
    });

    watch(
      obj,
      (val) => {
        console.log("obj改变了", val);
      },
      { deep: true }
    );

    return { count, obj, change, num };
  },

  // watch: {
  //   obj: {
  //     handle(){},
  //     deep: true,
  //   }
  // }
};
</script>
